<template>
  <div id="echarts3"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: ['data'],
  data() {
    return {
      myChart: null,
      echartsData:[],
    }
  },
  mounted() {
    this.initEcharts()
  },
  methods: {
    initEcharts() {
      const chartDom = document.getElementById('echarts3')
      this.myChart = echarts.init(chartDom)
      const self = this
      this.myChart.on('click', function (params) {
        // 控制台打印数据的名称
        self.$emit('satisfaction', self.echartsData[params.dataIndex])
      });
    },
    setEChartsOptions(data, labels) {
      const newData = data.map((item, index) => ({value: item, name: `${labels[index]}(${item})`}))
      this.echartsData = labels
      let option

      option = {
        title: {
          text: `客户满意度构成:`,
          // subtext: 'Fake Data',
          left: 'left'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          right: '10',
          orient: 'vertical',
          bottom: '10'
        },
        grid: {
          y: 0
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '60%',
            data: newData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      this.myChart && this.myChart.setOption(option);
    },
  },
  watch: {
    data({data, labels}) {
      this.setEChartsOptions(data, labels)
    }
  }
}
</script>

<style scoped>
#echarts3 {
  width: 100%;
  height: 500px;
}
</style>
